<!DOCTYPE html>
<html data-view-directly-accessible = "false">
<head>
	<meta charset = "utf-8" />
	<meta name = "format-detection" content = "telephone = no" />
	<meta name = "msapplication-tap-highlight" content = "no" />
	<meta name = "progma" content = "no-cache"/>
	<meta name = "cache-control" content = "no-cache, no-store, must-revalidate"/>
	<meta name = "viewport" content = "user-scalable = no, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, width = device-width" />

	<link rel = "stylesheet" href="css/view.css" />
	<link rel = "stylesheet" href="css/index.css" />

	<title>view-switch-animation</title>
</head>
<body>
	<!-- 视图1的DOM骨架 -->
	<section id = "page1" data-view = "true" data-view-default = "true" >
		<header>
			<span class = "nav-back" data-view-rel = ":back"></span>
			视图1
			<a class = "nav-homepage" data-view-rel = "@../../../index.html"></a>
		</header>
		<h1>这是视图1</h1>
		<div data-view-rel = "page2" class = "btn">进入视图2</div>
	</section>

	<!-- 视图2的DOM骨架 -->
	<section id = "page2" data-view = "true">
		<header>
			<span class = "nav-back" data-view-rel = ":back"></span>
			视图2
			<a class = "nav-homepage" data-view-rel = "@../../../index.html"></a>
		</header>
		<h1>这是视图2</h1>
		<div data-view-rel = "page3" class = "btn">进入视图3</div>
	</section>

	<!-- 视图3的DOM骨架 -->
	<section id = "page3" data-view = "true">
		<header>
			<span class = "nav-back" data-view-rel = ":back"></span>
			视图3
			<a class = "nav-homepage" data-view-rel = "@../../../index.html"></a>
		</header>
		<h1>这是视图3</h1>
		<div data-view-rel = ":default-view" class = "btn">进入视图1</div>
	</section>

	<script type = "text/javascript" src="js/plugin/view.min.js"></script>
	<script type = "text/javascript" src="js/view.switch.js"></script>
</body>
</html>
